<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="button" value="获取商品数据" id="btn1"><br>

    <input type="text" id="username">
    <input type="text" id="password">
    <input type="button" value="注册" id="btn2">
</body>
<script>

    const btn1 = document.querySelector("#btn1");
    const btn2 = document.querySelector("#btn2");
    const un = document.querySelector("#username");
    const pw = document.querySelector("#password");


    // 商品数据：get：http://localhost:3000/getgoods
    // 登录：get：http://localhost:3000/login
    // 注册：post：http://localhost:3000/register

    
    btn1.onclick = function(){
        const url = "http://localhost:3000/getgoods";
        ajax("get", url, function(res){
            console.log(res);
        })
    }
    btn2.onclick = function(){
        // post方式携带数据，不是在url后拼接，而是写在send的小括号内
        const url = "http://localhost:3000/register";
        ajax("post", url, function(res){
            console.log(res);
        },{
            username: un.value,
            password: pw.value
        })
    }

    function ajax(type, url, cb, data={}){
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        const xhr = new XMLHttpRequest();
        // 2. open的第一个参数，传为post
        xhr.open(type, url);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                cb(xhr.responseText);
            }
        }
        // 3. 请求时发送数据的数据格式修改为表单数据格式
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 1. 请求时携带的数据，不再拼接到url，而是直接放在send中
        xhr.send(str.slice(0, -1));
    }



</script>
</html>